<template>
  <el-dialog
    title="题目预览"
    :visible="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <div class="choose-box">
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】：{{ getQuestionType(questionsList.questionType) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】：{{ questionsList.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】：{{ getDifficulty(questionsList.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】：{{ questionsList.tags }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】：{{ questionsList.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】：{{ questionsList.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】：{{ questionsList.direction }}
          </div></el-col
        >
      </el-row>
    </div>
    <hr />
    <!-- 题干区域 -->
    <div>
      <p>【题干】：</p>
      <div>
        <pre style="color: blue" v-html="questionsList.question"></pre>
      </div>

      <div v-if="questionsList.questionType == 3 ? false : true">
        <p>
          {{ getQuestionType(questionsList.questionType) }}题 选项:
          (以下选中的选项为正确答案)
        </p>
        <!-- 单选框按钮 -->
        <div v-if="questionsList.questionType == 1 ? true : false">
          <!-- isRight是否选中，true选中，false不选中 -->
          <el-radio
            @change="radio = 1"
            v-model="radio"
            v-for="item in questionsList.options"
            :label="item.isRight"
            :key="item.id"
            style="display: block; margin: 10px"
            >{{ item.title }}</el-radio
          >
        </div>

        <!-- 多选框按钮 -->
        <div v-if="questionsList.questionType == 2 ? true : false">
          <el-checkbox
            v-model="item.isRight === 1 ? true : false"
            v-for="(item, index) in questionsList.options"
            :key="index"
            style="display: block; margin: 10px"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </div>
    </div>
    <hr />
    <!-- 参考答案 -->
    <div>
      <span>【参考答案】：</span>
      <el-button type="danger" @click="btnVideo">视频答案解析</el-button>
    </div>
    <video
      :src="questionsList.videoURL"
      controls="controls"
      style="width: 400px; height: 300px"
      v-show="isEaitUrl"
    ></video>
    <hr />
    <!-- 答案解析 -->
    <div>【答案解析】： <span v-html="questionsList.answer"></span></div>
    <hr />
    <!-- 题目备注 -->
    <div>
      <span>【题目备注】：{{ questionsList.remarks }}</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('update:dialogVisible', false)"
        >关闭</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'topicPreview',
  props: ['dialogVisible', 'id'],
  data () {
    return {
      questionsList: {},
      radio: 1,
      isEaitUrl: false
    }
  },
  created () {
    this.getQuestionslist()
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
    },
    // 获取详细信息
    async getQuestionslist () {
      const res = await detail({ id: this.id })
      console.log(res, 677777)
      this.questionsList = res.data
    },
    // 题型
    getQuestionType (n) {
      if (n === '1') {
        return '单选'
      } else if (n === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 难度
    getDifficulty (n) {
      if (n === '1') {
        return '简单'
      } else if (n === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    btnVideo () {
      this.isEaitUrl = true
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 900px !important;
}
.el-col {
  margin-bottom: 20px;
}
.el-radio-group {
}
</style>
